<template>
    <div class="wrap">
        <div class="head-conditions">
            <el-select style="margin-left: 196px" v-model="dynamic.name" clearable placeholder="请选择器材名称">
                <el-option
                        v-for="item in equipNameOptions"
                        :key="item"
                        :value="item">
                </el-option>
            </el-select>
            <el-select v-model="dynamic.employeeId" clearable placeholder="请选择员工名称">
                <el-option
                        v-for="item in empNameOptions"
                        :label="item.name"
                        :key="item.id"
                        :value="item.id">
                </el-option>
            </el-select>
            <el-button type="primary" @click="selectByCondition" icon="el-icon-search"
                       style="float: right;margin-left: 35px">查询
            </el-button>
        </div>
        <div class="table-main">
            <el-table
                    style="margin-top: 20px"
                    ref="filterTable"
                    :data="tableData"
                    border
                    :cell-style="rowStyle"
            >
                <el-table-column
                        prop="name"
                        label="器材名称"
                        width="160"
                        header-align="center">
                </el-table-column>
                <el-table-column
                        prop="time"
                        label="维修时间"
                        width="160"
                        header-align="center">
                </el-table-column>
                <el-table-column
                        prop="count"
                        label="维修数量"
                        width="80"
                        header-align="center">
                </el-table-column>
                <el-table-column
                        prop="price"
                        label="维修价格(￥)"
                        width="120"
                        header-align="center">
                </el-table-column>
                <el-table-column
                        prop="employee.name"
                        label="检修员工"
                        width="100"
                        header-align="center">
                </el-table-column>
                <el-table-column
                        prop="employee.phone"
                        label="员工手机号"
                        width="140"
                        header-align="center">
                </el-table-column>
            </el-table>
        </div>
        <div class="block">
            <el-pagination
                    background
                    @current-change="handleCurrentChange"
                    :current-page.sync="current"
                    :page-size="10"
                    layout="prev, pager, next, jumper"
                    :total="total">
            </el-pagination>
        </div>
    </div>
</template>

<script>
    import {getByDynamic, getAllEquipNames} from '@/utils/apis/equip'
    import {getAllMaintainer} from '@/utils/apis/employee'
    import filter from "@/utils/filter";

    export default {
        name: "EquipOverhaul",
        data() {
            return {
                tableData: [],
                current: 1,
                total: 0,
                //搜索条件
                dynamic: {
                    name: null,
                    employeeId: null
                },
                equipNameOptions: [],
                empNameOptions: []
            }
        },
        created() {
            this.initData()
        },
        methods: {
            //初始化数据
            initData() {
                const loading = this.$loading({
                    lock: false,
                    text: '更新数据.......',
                    spinner: 'el-icon-loading',
                    background: 'rgba(0, 0, 0, 0.7)'
                })
                this.handleCurrentChange(1)
                this.getMaintainers()
                this.getAllEquips()
                loading.close()
            },
            //切换页数
            async handleCurrentChange(val) {
                this.current = val
                await getByDynamic(this.dynamic, this.current, 10).then(res => {
                    this.updateFormData(res.data.data)
                })
            },
            //表格文字居中
            rowStyle() {
                return "text-align:center";
            },
            updateFormData(val) {
                this.total = val.total
                val.records.forEach(item => {
                    item.time = filter.formatDate(item.time, 'yyyy-MM-dd')
                })
                this.tableData = val.records
            },
            //条件查询
            selectByCondition() {
                if (this.dynamic.name === '')
                    this.dynamic.name = null
                else if (this.dynamic.employeeId === '')
                    this.dynamic.employeeId = null
                this.current = 1
                getByDynamic(this.dynamic, this.current, 10).then(res => {
                    this.updateFormData(res.data.data)
                })
            },
            //获取所有器材名称
            getAllEquips() {
                getAllEquipNames().then(res => [
                    this.equipNameOptions = res.data.data
                ])
            },
            getMaintainers() {
                getAllMaintainer().then(res => {
                    this.empNameOptions = res.data.data
                })
            }
        }
    }
</script>

<style scoped>
    .wrap {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .head-conditions {
        display: flex;
        justify-content: start;
    }

    .table-main {
        width: 761px;
    }

    .block {
        margin-top: 25px;
    }
</style>